<template>
  <div class="relative h-10 min-w-[200px]">
    <input
      v-model="model"
      :placeholder="placeholder"
      class="bg-indigo-50 peer h-full w-full rounded-[7px] border border-indigo-300 px-3 py-2.5 font-sans text-sm font-normal text-blue-indigo-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-indigo-200 placeholder-shown:border-t-blue-indigo-200 focus:border-2 focus:border-indigo-900 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-indigo-50 placeholder:opacity-0 focus:placeholder:opacity-100"
    />
    <label
      class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none !overflow-visible truncate text-[11px] font-normal leading-tight text-indigo-500 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-indigo-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-indigo-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-indigo-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-indigo-900 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:!border-indigo-900 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:!border-indigo-900 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-indigo-500"
    >
      {{ label }}
    </label>
  </div>
</template>

<script setup lang="ts">
  defineProps({
    placeholder: {
      type: String,
    },
    label: {
      type: String,
    },
  });
  const model = defineModel();
</script>

<style scoped></style>
